<template>
    <div class="detail">
        <PageTitle title="账号添加"></PageTitle>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="state">
                <el-select v-model="ruleForm.state" placeholder="请选择账号角色">
                <el-option label="订单管理" value="2"></el-option>
                <el-option label="财务管理" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button v-if="isadd" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import PageTitle from '@/components/pageTitle/PageTitle.vue'
export default {
    components:{
        PageTitle
    },
    data(){
        return{
            ruleForm:{
                username:null,
                password:null,
                state:null
            },
            isadd:true,
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min:5, message: '长度最小5个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min:6, message: '长度最小6个字符', trigger: 'blur' }
                ],
                state: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],
          
            }
        }
    },
    mounted(){
        this.isadd = this.$route.params.id == 'none' ? true : false
    },
    computed: {

    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    /* alert('submit!'); */
                    this.submit()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //表单提交
        async submit(){
            let {data:{code,data}} = await this.$axios({
                url: this.$api + '/v1/dlog/show',
                method: 'POST',
                data: {
                    username:this.ruleForm.username,
                    password:this.ruleForm.password,
                    state:this.ruleForm.state
                }
            })
            if (code === 0) {
                this.$message({
                    message: data,
                    type: 'success'
                });
            }
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style lang="scss" scoped>
    .detail{
        width: 40%;
    }
</style>